<template>
  <view class="search-filter">
    <view
      class="filter-item"
      :class="{ active: filterType === 'DEFAULT' }"
      @click="clickFilter('DEFAULT')"
    >
      <view class="label">
        综合
      </view>
    </view>
    <view
      class="filter-item"
      :class="{ active: filterType === 'PRICE' }"
      @click="clickFilter('PRICE')"
    >
      <view class="label">
        价格
      </view>
      <view class="sort-icon">
        <v-icon
          :active="filterType === 'PRICE' && filterSort === 'ASC'"
          size="15rpx"
          :custom-style="{ marginBottom: '-6rpx' }"
          active-src="@/static/icons/search-sort-arrow-active.svg"
          src="@/static/icons/search-sort-arrow.svg"
        />
        <v-icon
          :active="filterType === 'PRICE' && filterSort === 'DESC'"
          size="15rpx"
          :custom-style="{ transform: 'rotate(180deg)', marginTop: '-6rpx' }"
          active-src="@/static/icons/search-sort-arrow-active.svg"
          src="@/static/icons/search-sort-arrow.svg"
        />
      </view>
    </view>
    <view
      class="filter-item"
      :class="{ active: filterType === 'TIME' }"
      @click="clickFilter('TIME')"
    >
      <view class="filter-label">
        时间
      </view>
      <view class="sort-icon">
        <v-icon
          :active="filterType === 'TIME' && filterSort === 'ASC'"
          size="15rpx"
          :custom-style="{ marginBottom: '-6rpx' }"
          active-src="@/static/icons/search-sort-arrow-active.svg"
          src="@/static/icons/search-sort-arrow.svg"
        />
        <v-icon
          :active="filterType === 'TIME' && filterSort === 'DESC'"
          size="15rpx"
          :custom-style="{ transform: 'rotate(180deg)', marginTop: '-6rpx' }"
          active-src="@/static/icons/search-sort-arrow-active.svg"
          src="@/static/icons/search-sort-arrow.svg"
        />
      </view>
    </view>
    <view
      class="filter-item"
      @click="$emit('selectCategory')"
    >
      <view class="filter-label">
        分类
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  filterType: 'DEFAULT' | 'PRICE' | 'TIME';
  filterSort: 'ASC' | 'DESC';
}>();
const emits = defineEmits<{
  'update:filter-type': [type: 'DEFAULT' | 'PRICE' | 'TIME'];
  'update:filter-sort': [sort: 'ASC' | 'DESC'];
  update: [];
  selectCategory: [];
}>();

const clickFilter = (type: 'DEFAULT' | 'PRICE' | 'TIME') => {
  if (type === props.filterType) {
    emits('update:filter-sort', props.filterSort === 'ASC' ? 'DESC' : 'ASC');
  } else {
    emits('update:filter-type', type);
    emits('update:filter-sort', 'ASC');
  }
  emits('update');
};
</script>

<style lang="scss" scoped>
.search-filter {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 80rpx;
  background-color: #ffffff;
  padding: 0 24rpx;
  .filter-item {
    width: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8rpx;
    &.active {
      color: #ff2f3b;
    }
  }
  .sort-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rpx;
    .desc {
      transform-origin: center;
      transform: rotate(180deg);
    }
  }
}
</style>
